<script setup>

</script>

<template>
    <router-view/>
</template>

<style>
/* 让滚动条变得好看一些 */
/* 定义滚动条的整体样式 */
::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
    background-color: transparent; /* 滚动条背景颜色 */
}

/* 定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* 轨道阴影 */
    border-radius: 10px; /* 轨道圆角 */
    background-color: transparent; /* 轨道背景颜色 */
}

/* 定义滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    border-radius: 10px; /* 滑块圆角 */
    background-color: #999; /* 滑块背景颜色 */
    border: 2px solid #fff; /* 滑块边框 */
    background-clip: content-box; /* 使动画只应用于滑块内部 */
}

/* 定义CSS动画 */
@-webkit-keyframes scrollbar-pulse {
    0% {
        background-color: #999;
    }
    20% {
        background-color: #777;
    }
    100% {
        background-color: #999;
    }
}

/* 当鼠标悬停在滑块上时，使动画无限循环播放 */
::-webkit-scrollbar-thumb:hover {
    -webkit-animation: scrollbar-pulse 1s infinite linear;
}

</style>
